<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .init{
            font-size: 12px;
            color: #999;
        }

        .success{
            color: green;
            font-size: 12px;
        }

        .fail{
            color:red;
            font-size: 12px;
        }
    </style>
</head>
<body>

<!--实现注册用户的检测-->
    <form id="registerForm">
        &nbsp;&nbsp;&nbsp;用户名:<input type="text" id="username" onblur="checkValue(this)"> <span id="username_span" class="init">* 小写字母开头,数字字母_组成,6-8</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码:<input type="text" id="pwd" ><span id="pwd_span" class="init">* 密码纯数字,6-8</span><br>
        确认密码:<input type="text" id="pwd2"><span class="init" id="pwd2_span">* 和密码保持一致</span><br>

        <input type="button" value="register">
    </form>

    <script>
        function checkValue(obj) {
            console.log("====1begin====");

            let username=obj.value;//输入的数据

            //将这个数据发送到后台servlet
            //1.创建一个XMLHttpRequest对象
            //1-1.页面发送数据到后台
            //1-2.后台可以接受到数据
            //1-3.页面可以接受后台响应过来的数据
            //1-4.保证整个数据交互的过程是局部刷新，不用重新加载整个页面

            //1.创建一个XMLHttpRequest对象
            let xmlHttpRequest=new XMLHttpRequest();

            //2.创建一个回调函数
            xmlHttpRequest.onreadystatechange=function () {
                //当readyState属性值=4的时候，才代表一次请求，一次响应完了
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    //获取后台数据
                    let result=xmlHttpRequest.responseText;

                    //将字符串形式的result的json格式转换成js里面的json对象
                    let result_obj=JSON.parse(result);

                    let span_obj=document.getElementById("username_span");

                    if(result_obj.code=="200"){
                        //js操作dom属性值
                        span_obj.className="success";
                    }else{
                        span_obj.className="fail";
                    }
                    span_obj.innerText="* "+result_obj.mag;

                    if(username.length==0){
                        span_obj.className="init";
                        span_obj.innerText="* 请你输入用户名";
                    }
                }

                //3.准备请求参数
                xmlHttpRequest.open("get","/prj/ajax/check?unmae="+username,true);

                //4.发送请求
                xmlHttpRequest.send();

            };
        }

        let pwd=document.getElementById("pwd");

        checkData(pwd,"密码可用",function () {
            let pwd_value=pwd.value;
            if((/^[0-9]{6,8}$/).test(pwd_value)){
                return true;
            }else{
                return false;
            }
        });

        let pwd2=document.getElementById("pwd2");
        checkData(pwd,"和密码保持一致",function () {

        })

        function checkData(obj,spanStr,fun) {
            //获取每个obj对应的span标签
            let span_obj=obj.nextElementSibling;

            obj.onblur=function () {
                console.log(fun());
                if(fun()){
                    span_obj.className="success";
                    span_obj.innerText=spanStr;
                }else{
                    span_obj.className="fail";
                    span_obj.innerText=span_obj.innerText;
                }
            }
        }

    </script>

</body>
</html>